<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>提交作品</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/myProduct.css" />
</head>
<body>
  <div id="header">
      <div id="back"></div>
      <h3>提交作品</h3>
  </div>
  <div id="all">
    <div class="main new-main">
      <div class="images">
        <h3>作品图集上传</h3>
        <div class="picture">
          <img class="add" src="../../image/add.png">
        </div>
      </div>
      <div class="detail">
        <h3>作品简介</h3>
        <textarea type="text" class="form-input productInfo" placeholder="从技术和设计原理角度进行填写"></textarea>
      </div>
      <div class="team">
        <h3>团队简介</h3>
        <textarea type="text" class="form-input productInfo" placeholder="介绍团队构成"></textarea>
      </div>
      <div class="url">
        <h3>作品URL</h3>
        <input type="text" class="form-input" placeholder="URL地址"/>
      </div>
    </div>
  </div>
  <footer>
    <button class="myBtn" style="font-size:16px;">提交我的作品</button>
  </footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/main.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript">
apiready=function(){

}
//jquery
var images=[];
var photoBrowser;
$(function(){
  $('.add').on("click",function(){
    if(images.length<9){
      api.confirm({
          title: '选取图片',
          msg: '您想要从哪里选取图片 ?',
          buttons: ['优雅自拍', '相册收藏', '取消']
      }, function(ret, err) {
          // var sourceType = 'album';

          if (3 == ret.buttonIndex) { // 取消
              return;
          }
          else if (1 == ret.buttonIndex) { // 打开相机
              // sourceType = 'camera';
              api.getPicture({
                  sourceType: 'camera',
                  encodingType: 'png',
                  mediaValue: 'pic'
              }, function(ret, err) {
                  if (ret.data.length) {
                    var len = images.length;
                    images[len] = ret.data;
                    var imgHTML="<img class='browser' src='"+images[len]+"'onclick = 'browserImage("+len+")'>";
                    $(".add").before(imgHTML);
                    if(images.length>8){
                      $('.add').hide();
                    }
                    //alert(ret.data);

                  }
              });
          }else{
            addImage();
          }



      });


    //  addImage();
    }
  });
  // $('.browser').on("click",function(){
  //   alert('111');
  //   browserImage();
  // });
  back();
});
//选择多张照片
function addImage(){
  var UIMediaScanner = api.require('UIMediaScanner');
  UIMediaScanner.open({
    type: 'picture',
    classify: true,
    max: 9,
    sort: {
        key: 'time',
        order: 'desc'
    },
    texts: {
        stateText: '已选择*项',
        cancelText: '取消',
        finishText: '完成'
    },
    styles: {
        bg: '#fff',
        mark: {
            icon: '',
            position: 'top_right',
            size: 20
        },
        nav: {
            bg: '#37acfe',
            stateColor: '#fff',
            stateSize: 18,
            cancelBg: 'rgba(0,0,0,0)',
            cancelColor: '#fff',
            cancelSize: 18,
            finishBg: 'rgba(0,0,0,0)',
            finishColor: '#fff',
            finishSize: 18
        }
    },
    exchange: true,
    rotation: true,
    showPreview: true
  }, function(ret,err) {
    if (ret.list) {
      //alert(JSON.stringify(ret));
      list = ret.list;
      var len = images.length;
      $.each(list, function(i,val){
        images[len+i]=list[i].path;
        var imgHTML="<img class='browser' src='"+images[len+i]+"'onclick = 'browserImage("+(len+i)+")'>";
        $(".add").before(imgHTML);
      });
      if(images.length>8){
        $('.add').hide();
      }
             //uploadImage(list.length);
    }
  });
}
//预览图片
function browserImage(index){
  photoBrowser = api.require('photoBrowser');
  // button = api.require('button');
  photoBrowser.open({
      images: images,
      bgColor: '#000',
      activeIndex: index
  }, function(ret, err) {
    if (ret) {
      if(ret.eventType == "click"){
        photoBrowser.close();
        // button.close({
        //     id: 1
        // });
      }
      if(ret.eventType == "longPress"){
        api.actionSheet({
            cancelTitle: '取消操作',
            buttons: ['保存图片','删除图片']
        },function( ret, err ){
            if( ret.buttonIndex == 1 ){
              saveImage();
            }
            if(ret.buttonIndex == 2){
                delImage();
            }
        });
        // delImage(button);
      }
    }
  });
}
//删除图片
function delImage(){
  var index;
  photoBrowser.getIndex(function(ret, err) {
    index=ret.index;
    photoBrowser.deleteImage({
      index: index
    });
    images.splice(index,1);
    $($(".picture").find("img")[index]).remove();
    // $(".picture").remove($(".picture").children(index+1));
  });
  //alert(index);
  api.toast({
      msg: "删除成功",
      duration: 1000,
      location: 'bottom'
  });
  photoBrowser.close();
}
//保存图片
function saveImage(){
  var index;
  photoBrowser.getIndex(function(ret, err) {
    index=ret.index;
    photoBrowser.getImage({
      index: index
    }, function(ret, err) {
      api.saveMediaToAlbum({
        path :ret.path
      }, function(ret, err) {
        if (ret) {
          api.toast({
              msg: "保存成功",
              duration: 1000,
              location: 'bottom'
          });
        }
      });
    });
  });
  //alert(index);
  photoBrowser.close();
}
// function uploadImage(length) {
//         //压缩图片
//         if ( length == 0) {
//                 return;
//         }
//         var item = list[length-1];
//         var imgPath = item.path;
//         var img_Name = new Date().getTime() + "_" + length;
//         var imageCachePath = api.cacheDir;
//         var imageFilter = api.require("imageFilter");
//         imageFilter.compress({
//                 img : imgPath,
//                 quality : 0.5,
//                 scale : 0.5,
//                 save : {
//                         album : true,
//                         imgPath : imageCachePath,
//                         imgName : img_Name + '.jpg'
//                 }
//         }, function(reta, err) {
//                 if (reta.status) {
//                         var compressedImgPath = imageCachePath + '/' + img_Name + '.jpg';
//                         //上传图片
//                         var model = api.require('model');
//                         model.config({
//                                 appId : 'A657',
//                                 appKey : 'F0A794'
//                         });
//                         model.uploadFile({
//                                 report : true,
//                                 data : {
//                                         file : {
//                                                 name : img_Name,
//                                                 url : compressedImgPath
//                                         },
//                                 }
//                         }, function(retb, err) {
//                                 if (retb) {
//                                         var state = retb.state;
//                                         if (state == 1) {
//                                                 var body = retb.body;
//                                                 if (body) {
//                                                         $api.text($api.byId('' + imgPath + ''), '上传完成');
//                                                         $api.attr($api.byId('' + imgPath + ''), 'data-id', '' + body.id + '');
//                                                 }
//                                                 uploadImage(length-1);
//                                         }
//                                 } else {
//                                         alert(JSON.stringify(err));
//                                 }
//                         });
//                 }
//         });
// }
</script>
</html>
